<template>
	<header>
		<div class="carousel">
			<swiper auto loop dots-position='center' height='5.1rem'>
				<swiper-item><img src="../../assets/home4_06.jpg" alt="" /></swiper-item>
				<swiper-item><img src="../../assets/xiaobanner1.jpg" alt="" /></swiper-item>
				<swiper-item><img src="../../assets/xiaobanner2.jpg" alt="" /></swiper-item>
				<div class="carText">
					<h1>和我们一起去旅游</h1>
					<p>人生就是一次充满未知的旅行，旅行不会因为美丽的风景终止。走过的路成为背后的风景，不能回头不能停留，若此刻停留，将会错过更好的风景。</p>
				</div>
		  </swiper>
		</div> 
	</header>
</template>

<script>
	import {Swiper, SwiperItem} from 'vux'
	export default {
		components : {
			Swiper, SwiperItem
		},
		data (){
			return {
			
			}
		},
		methods : {
		
		}
	}
</script>

<style>
	header .carousel{
		height:5.1rem; position: relative; 
	}
	header .carousel img{
		width:100%; 
	}
	.vux-slider > .vux-indicator > a > .vux-icon-dot{
		background: #000 !important; border:0.01rem solid #fff; border-radius: 0.06rem !important; width:0.07rem !important; height:0.07rem !important;	
	}
	.vux-slider > .vux-indicator > a > .vux-icon-dot.active{
		background: #fff !important; border:0.01rem solid #000;
	}
	.carousel .carText{
		position:absolute; z-index:99; color:#fff; text-align:center; top:33%;
	}
	.carousel .carText h1{
		font-size:0.26rem; 
	}
	.carousel .carText h1:after{
		display:block; width:0.6rem; height:0.02rem; background:#fff; margin:0.2rem auto; content:' ';
	}
	.carousel .carText p{
		font-size:0.13rem; line-height:0.26rem;
	}
</style>



























